<template>
    <div>
        <div style="width: 35%; height: 450px;float: left;" id="histogram" ref="histogram"></div>
        <yuanquan style="margin-left: 500px;" />
        <Zhexian />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import Yuanquan from './yuanquan.vue';
// import Zhexian from './zhexian.vue';

export default {
    components: {
        Yuanquan,
        // Zhexian
    },
    name: 'StoreLeaveChart',

    data() {
        return {
            list: [],
            myChart: null,
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: '账户余额图'
                },
                legend: {
                    data: ['金额']
                },
                xAxis: {
                    data: [],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '金额',
                        data: [],
                        type: 'bar',
                        barWidth: '40%',
                    }
                ],
                color: ['#8dcfff']
            },
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.myChart = echarts.init(this.$refs.histogram);
            this.myChart.setOption(this.option);
        },
        updateChart() {
            const storeData = this.list.map(item => item.presentMoney);
            const AxData = this.list.map(item => item.accountName);
            this.option.series[0].data = storeData;
            this.option.xAxis.data = AxData;
            this.myChart.setOption(this.option);
        },
        getAccounts() {
            this.axios({
                url: "/info/account/selectAll"
            }).then(rs => {
                this.list = rs.data.accounts;
                this.updateChart();
            }).catch(error => {
                console.error('Error fetching data:', error);
            });
        }
    },
    created() {
        this.getAccounts();
    }
}
</script>